<template>
  <div class="page-container">
    <div class="page-content">
      <el-row :gutter="10">
        <el-col :span="12">
          <div class="panel-container">
            <LineChart
              :chart-data="chartDataLine"
              :height="height"
            />
          </div>
        </el-col>
        <el-col :span="12">
          <div class="panel-container">
            <MixChart
              :chart-data="chartDataLine"
              :height="height"
            />
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="12">
          <div class="panel-container">
            <BarChart
              :chart-data="chartDataLine"
              :height="height"
            />
          </div>
        </el-col>
        <el-col :span="12">
          <div class="panel-container">
            <LineChart
              :chart-data="chartDataLine"
              :height="height"
            />
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import LineChart from '@/components/ECharts/LineChart.vue'
import BarChart from '@/components/ECharts/BarChart.vue'
import MixChart from '@/components/ECharts/MixChart.vue'

export default {
  name: 'Dashboard',
  components: {
    LineChart,
    BarChart,
    MixChart
  },
  data() {
    return {
      height: '400px',
      chartDataLine: {
        xAxis: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        series: [
          {
            name: '访问',
            type: 'line',
            data: [120, 200, 150, 80, 70, 80, 90]
          },
          {
            name: '点击',
            type: 'bar',
            data: [110, 180, 160, 150, 100, 130, 160]
          }
        ]
      },
      chartDataPie: {
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: '55%',
            data: [
              { value: 235, name: '视频广告' },
              { value: 274, name: '联盟广告' },
              { value: 310, name: '邮件营销' },
              { value: 335, name: '直接访问' },
              { value: 400, name: '搜索引擎' }
            ]
          }
        ]
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
